import Vue from 'vue'
import Vuex from 'vuex'

import { getUserInfoAPI, getUserProfileAPI } from '../api/userApi'

Vue.use(Vuex)
let initState = {
  tokenInfo: {
    token: '',
    refresh_token: ''
  },
  userInfo: {},
  userProfile: {}

}
// 从localStorage中取
const stateStr = localStorage.getItem('state')
if (stateStr != null) {
  initState = JSON.parse(stateStr)
}
export default new Vuex.Store({

  state: initState,
  mutations: {
    // 更新tokenInfo
    // payload的格式为(token,refresh_token)
    updateTokenInfo (state, payload) {
      state.tokenInfo = payload
      localStorage.setItem('state', JSON.stringify(state))
    },
    updateUserInfo (state, payload) {
      // 1. 把用户信息转存到 state 中
      state.userInfo = payload
      // 2. 将最新的 state 对象持久化存储到本地
      localStorage.setItem('state', JSON.stringify(state))
    },
    updateUserProfile (state, payload) {
      state.userProfile = payload
      localStorage.setItem('state', JSON.stringify(state))
    },
    cleanState (state) {
      // 1. 清空 vuex 中的数据
      state.tokenInfo = {}
      state.userInfo = {}
      state.userProfile = {}
      // 2. 将清空后的 state 存储到本地
      localStorage.setItem('state', JSON.stringify(state))
    }
  },
  getters: {
    // 用户头像的计算属性
    userAvatar (state) {
      // 默认的头像地址
      let imgSrc = 'https://img.yzcdn.cn/vant/cat.jpeg'

      // 如果用户信息对象中包含 photo 属性的值，则为 imgSrc 重新赋值
      if (state.userInfo.photo) {
        imgSrc = state.userInfo.photo
      }

      return imgSrc
    }
  },
  actions: {
    async initUserInfo (ctx) {
      // 调用 API 接口
      const { data: res } = await getUserInfoAPI()
      if (res.message === 'OK') {
        // TODO：把数据转交给 Mutation 方法   ctx.commit('Mutation方法名')
        ctx.commit('updateUserInfo', res.data)
      }
    },
    // 初始化用户的简介信息
    async initUserProfile (ctx) {
      // 调用 API 接口
      const { data: res } = await getUserProfileAPI()
      if (res.message === 'OK') {
        // TODO：把请求到的数据转交给 Mutation 方法   ctx.commit('Mutation方法名')
        ctx.commit('updateUserProfile', res.data)
      }
    }
  },
  modules: {
  }

})
